<template>
  <view class="popup-mask" v-if="visible" :catchtouchmove="true">
    <view class="popup-container" @click.stop>
      <view class="popup-content">
        <view class="body-title">
          {{ title }}
        </view>
        <view class="body-content">
          <input class="my-input" :value="value" :type="inputType" @input="onInput" />
        </view>
      </view>
      <view class="popup-actions">
        <button class="cancel-button" @click="handleCancel">取消</button>
        <button class="confirm-button" @click="handleConfirm">确认</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'myInput',
  data() {
    return {
      visible: false,
      title: '添加',
      value: '',
      inputType: 'text',
      cmd: null,
    }
  },
  methods: {
    show(data) {
      // console.log(data)
      const { title, value, inputType, cmd } = data
      this.title = title
      this.value = value
      this.inputType = inputType
      this.cmd = cmd
      this.visible = true
    },
    onInput(event) {
      let newVal = event.target.value
      console.log('input new:' + newVal)
      this.value = newVal
    },
    checkVal() {
      let checkRes = false
      const isNumber = /^[0-9]+([.][0-9]+)?$/
      const integerPattern = /^-?\d+$/
      const oneDecimalPattern = /^-?\d+\.\d{0,1}$/
      const twoDecimalPattern = /^-?\d+\.\d{0,2}$/
      if (!this.value) {
        uni.showToast({
          title: '请输入' + this.title,
          duration: 2000,
          icon: 'none',
        })
        return true
      }
      const newVal = this.value
      switch (this.cmd) {
        case 0x03:
          if (!integerPattern.test(newVal)) {
            uni.showToast({
              title: '请输入整数',
              duration: 2000,
              icon: 'none',
            })
            checkRes = true
            break
          }
          if (newVal < 13 || newVal > 28) {
            uni.showToast({
              title: '串数值需要在13-28之间',
              duration: 2000,
              icon: 'none',
            })
            checkRes = true
          }
          break
        case 0x06:
          if (!integerPattern.test(newVal)) {
            uni.showToast({
              title: '请输入整数',
              duration: 2000,
              icon: 'none',
            })
            checkRes = true
          }
          break
        case 0x0d:
          if (!integerPattern.test(newVal)) {
            uni.showToast({
              title: '请输入整数',
              duration: 2000,
              icon: 'none',
            })
            checkRes = true
            break
          }
          if (newVal < 0 || newVal > 65535) {
            uni.showToast({
              title: '校准值需要在0-65535之间',
              duration: 2000,
              icon: 'none',
            })
            checkRes = true
          }
          break
          cmd = 0x07
          if (!isNumber.test(newVal)) {
            uni.showToast({
              title: '请输入合法数值',
              duration: 2000,
              icon: 'none',
            })
            checkRes = true
          }
          break
      }
      return checkRes
    },
    handleCancel() {
      this.visible = false
      this.$emit('cancel')
    },
    handleConfirm() {
      const checkRes = this.checkVal()
      if (checkRes) {
        return
      }
      this.visible = false
      this.$emit('confirm', this.cmd, this.value)
    },
  },
}
</script>

<style lang="scss">
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.popup-container {
  background-color: #fff;
  width: 80%;
  padding: 24rpx;
  border-radius: 10px;
  overflow: hidden;
}

.popup-content {
  padding: 20px;
}

.body-title {
  width: 100%;
  display: flex;
  justify-content: center;
  font-family: MicrosoftYaHei;
  font-size: 41rpx;
  margin-bottom: 20rpx;
}
.search-box .search-cancel {
  width: 158rpx;
  height: 76rpx;
  line-height: 78rpx;
  text-align: center;
  // background: #3a2b44;
  border-radius: 5rpx 5rpx 5rpx 5rpx;
  border: 1px solid #3a2b44;
  color: #3a2b44;
}
.popup-actions {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #574166;
}

.cancel-button,
.confirm-button {
  height: 85rpx;
  line-height: 85rpx;
  flex: 1;
  text-align: center;
  border: none;
  background: none;
  border-radius: 0;
  font-family: MicrosoftYaHei;
  font-size: 40rpx;
}

.cancel-button {
  color: #666666;
  border-right: 1px solid #574166;
}

.confirm-button {
  color: #ff0000;
}

// .cancel-button:hover,
// .confirm-button:hover {
//   background-color: #f0f0f0;
// }

.my-input {
  padding-left: 10rpx;
  height: 80rpx;
  border: 1px solid #f0f0f0;
  border-radius: 6rpx;
  font-size: 32rpx;
}
</style>
